import React, { useState, useEffect, ChangeEvent } from 'react';
import { Modal } from 'antd';
import { useTranslation } from 'react-i18next';

import './styles/choose_rest.less';
import AgentServer from '@/modules/Agent';

interface ChooseRestProps {
	onClose?: () => void;
	onOk?: (data: string) => void;
	visible: boolean;
}

const ChooseRest = (props: ChooseRestProps) => {
	const { t } = useTranslation();
	const { onClose, onOk, visible = true } = props;

	const submitOtherWork = () => {
		const data = document.getElementById('widget-otherWork-reason')!.value;
		onOk && onOk(data);
	};

	useEffect(() => {
		if (!visible && document.getElementById('widget-otherWork-reason')) {
			document.getElementById('widget-otherWork-reason')!.value = '';
		}
	}, [visible]);

	return (
		<Modal title={t('fill-break-reason')} okText={t('sure')} getContainer={AgentServer.rootContainer} cancelText={t('cancel')} open={visible} onCancel={onClose} onOk={submitOtherWork} className="other-work-modal">
			<div className="check-group-contents" slot="contents">
				<textarea id="widget-otherWork-reason" cols={30} rows={10} className="widget-otherWork-reason" placeholder={t('fill-reason-limit-50-words') as string} maxLength={50}></textarea>
			</div>
		</Modal>
	);
};

export default ChooseRest;
